<template>
<div style="height: 90vh;overflow: hidden">
<ElContainer>
  <el-main>
    <ElRow :gutter="40">
      <ElCol :span="18">
        <img src="/imgs/login/bg.png" alt="bg" style="width: 90%;margin-bottom: 10px;">
      </ElCol>
      <ElCol :span="6">
        <ElCard style="margin-top: 40%;width:380px;height: 465px;box-sizing: border-box;position: relative;">
          <div style="height: 60px;width: 100%;position: relative;display: flex;align-items: center;margin: 30px 45px 30px;">
            <div>
              <div id="u2686"><img src="public/u2686.svg" alt=""></div>
              <div id="u2687" class=""></div>
              <div  id="u2688" ><img src="public/u2688.svg" alt=""></div>
            </div>
            <p id="u2689"><span>病案管理系统</span></p>
          </div>
            <div v-if="loginMethod === 'default'">
              <!-- 默认登录框 -->
              <DefaultLoginForm />
            </div>
            <div v-if="loginMethod === 'qr'">
              <!-- 扫码登录框 -->
              <QrLoginForm />
            </div>
            <div v-if="loginMethod === 'phone'">
              <!-- 手机号登录框 -->
              <PhoneLoginForm />
            </div>
            <div class="aaa" style="font-size: 14px;padding-top: 20px;text-align: center;position: absolute;bottom: 30px;right: 60px;">
              <span style="margin-right: 30px;">其他登录方式</span>
              <span>
                  <a @click="selectLoginMethod('qr')" v-if="loginMethod !== 'qr'">扫码登录</a>
              </span>
              <span v-if="loginMethod === 'default'" style="font-size: 16px;margin: 0 2px;">|</span>
              <span v-if="loginMethod === 'phone'" style="font-size: 16px;margin: 0 2px;">|</span>
              <span>
                  <a @click="selectLoginMethod('phone')" v-if="loginMethod !== 'phone'">手机号登录</a>
              </span>
              <span v-if="loginMethod === 'qr'" style="font-size: 16px;margin: 0 2px;">|</span>
              <span>
                  <a @click="selectLoginMethod('default')" v-if="loginMethod !== 'default'">账号登录</a>
              </span>
            </div>
        </ElCard>
      </ElCol>
    </ElRow>
  </el-main>
</ElContainer>
</div>
</template>

<script setup>
import {ref} from "vue";
import DefaultLoginForm from './DefaultLoginForm.vue';
import QrLoginForm from './QrLoginForm.vue';
import PhoneLoginForm from './PhoneLoginForm.vue';

const loginMethod = ref('default'); // 默认显示默认登录框

const selectLoginMethod = (method) => {
  loginMethod.value = method;
};
</script>



<style scoped>

#u2687{
  position:absolute;
  left:15px;
  top:26px;
  width: 20px;
  height: 20px;
  background:inherit;
  background-color:rgba(0, 167, 111, 1);
  box-sizing:border-box;
  border-width:1px;
  border-style:solid;
  border-color:rgba(0, 167, 111, 1);
}

#u2686{
  width: 23px;
  height: 22px;
  background-color: #18CCD0;
  position: absolute;
  left: 38px;
  top: 25px;
  border-radius: 50%;
}

#u2688{
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 16px solid transparent;
  border-bottom: 19px solid #0368FF;
  position: absolute;
  left: 20px;
  top: 3px;
}

#u2689 {
  width:200px;
  height:32px;
  display:flex;
  font-family:'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
  font-weight:700;
  font-style:normal;
  font-size:26px;
  color:#000000;
  margin-left: 80px;
  margin-bottom: 38px;
}

a{
  text-decoration:none;
  color:#0368FF;
}
</style>
